<!DOCTYPE HTML>
<html>

<head>
   <title>商户分类管理</title>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <link href="../../../assets/css/dpl-min.css" rel="stylesheet" type="text/css" />
   <link href="../../../assets/css/bui-min.css" rel="stylesheet" type="text/css" />
   <link href="../../../assets/css/page-min.css" rel="stylesheet" type="text/css" />
   <link href="../../../assets/css/jx-style.css" rel="stylesheet" type="text/css" />
   <link href="../../../assets/css/prettify.css" rel="stylesheet" type="text/css" />
</head>

<body class="dark-theme">
   <div class="container">
      <div class="detail-page span24 ">
         <div class="detail-page-title">
            <h4>商户分类列表
               <button id="add-new-btn" class="jx-btn btn-default pull-right">新增分类</button>
            </h4>
         </div>
         <div class="detail-section">
            <div class="detail-row">
               <div>
                  <div id="grid"></div>
               </div>
            </div>
            <!-- 表格 start-->
            <!--   <div id="grid"></div> -->
            <!-- 表格 end-->
         </div>
      </div>
   </div>
   </div>

   <!-- 初始隐藏 dialog内容    -->
   <div id="content" class="hide">
      <form id="form" class="jx-form form-horizontal jx-form-thin">
         <div class="row">
            <div class="control-group span10">
               <label class="control-label">排序：</label>
               <div class="controls">
                  <input type="text" name="d" class="control-text" data-rules="{required:true,number:true}">
               </div>
            </div>
         </div>
         <div class="row">
            <div class="control-group span10">
               <label class="control-label">分类名称：</label>
               <div class="controls">
                  <input type="text" name="c" class="control-text input-large" data-rules="{required:true}">
               </div>
            </div>
         </div>

         <div class="row">
            <div class="control-group span10">
               <label class="control-label">分类编号：</label>
               <div class="controls">
                  <input type="text" name="b" class="control-text" data-rules="{required:true,number:true}">
               </div>
            </div>
         </div>
      </form>
   </div>

   <script type="text/javascript" src="../../../assets/js/jquery-1.8.1.min.js"></script>
   <script type="text/javascript" src="../../../assets/js/bui-min.js"></script>
   <script type="text/javascript" src="../../../assets/js/config-min.js"></script>
   <script type="text/javascript" src="../../../assets/js/admin.js"></script>

   <script type="text/javascript">
      BUI.use('common/page');
   </script>
   <!-- script start -->
   <script>
      BUI.use(['bui/grid', 'bui/data', 'bui/form', 'common/search'], function (Grid, Data, Form, Search) {
         var Grid = Grid,
            Store = Data.Store,
            columns = [{
                  title: '序号',
                  dataIndex: 'a',
                  elCls: 'center', //居中
                  width: 100
               }, {
                  title: '分类编号',
                  elCls: 'center',
                  dataIndex: 'b',
                  width: 150
               }, {
                  title: '分类名称',
                  elCls: 'center',
                  dataIndex: 'c',
                  width: 100
               }, {
                  title: '排序',
                  elCls: 'center',
                  dataIndex: 'd',
                  width: 100
               },
               {
                  title: '操作',
                  dataIndex: 'h',
                  elCls: 'center',
                  width: 200,
                  renderer: function (value, obj) {
                     var editStr =
                        '<span class="grid-command btn-edit">[ 编辑 ]</span>';
                     return editStr; //页面操作不需要使用Search.createLink
                  }
               }
            ],
            data = [{
               a: '1',
               b: '001',
               c: '户外运动',
               d: '1'
            }];

         var store = new Store({ //初始化数据
               data: data,
               pageSize: 2 // 配置分页数目
            }),
            editing = new BUI.Grid.Plugins.DialogEditing({
               contentId: 'content', //设置隐藏的Dialog内容
               autoSave: true, //添加数据或者修改数据时，自动保存
               triggerCls: 'btn-edit'
            }),
            grid = new Grid.Grid({
               render: '#grid',
               elCls: 'jx-table-thin',
               columns: columns,
               forceFit: true,
               plugins: [editing, Grid.Plugins.AutoFit],
               bbar: {
                  // pagingBar:表明包含分页栏
                  pagingBar: true
               },
               store: store
            });

         // 点击添加对图片操作
         $("#add-new-btn").click(function () {
            addFunction();
         });

         //添加记录
         function addFunction() {
            var newData = {
               b: ''
            };
            editing.add(newData, 'a'); //添加记录后，直接编辑
         }
         grid.render();


      });
   </script>
   <!-- script end -->

</body>

</html>